<template>
  <div class="bgcolor">
    <span class="zckj">(联合)众创空间</span>
    <div class="font">第二届“讯飞杯”打字比赛</div>

    <div class="rank">
      <div class="ranks">比赛成绩排行榜</div>

      <el-table
        :data="rankList"
        border
        max-height="700"
        height="570"
        highlight-current-row
        :row-class-name="tableRowClassName"
      >
        <el-table-column
          type="index"
          width="50px"
          align="center"
          prop="ranking"
          label="排名"
        >
        </el-table-column>

        <el-table-column
          prop="username"
          label="姓名"
          width="150%"
          align="center"
        >
        </el-table-column>

        <el-table-column
          prop="college"
          label="学院"
          width="150%"
          align="center"
        >
        </el-table-column>

        <el-table-column prop="major" label="专业" width="240%" align="center">
        </el-table-column>
        <el-table-column
          prop="classes"
          label="班级"
          width="240%"
          align="center"
        >
        </el-table-column>

        <el-table-column prop="score" label="成绩" align="center">
        </el-table-column>

        <el-table-column
          prop="correct"
          label="正确率"
          :formatter="Percentage"
          align="center"
        ></el-table-column>
      </el-table>
    </div>

    <div class="button-box">
      <button class="button" @click="backhome">返回首页</button>
    </div>
  </div>
</template>

<script>
import { getRankAPI } from '@/api/RankAPI'
export default {
  created() {
    this.RankList()
  },
  data() {
    return {
      mobilePhone: '',
      score: '',
      rankList: []
    }
  },
  methods: {
    async RankList() {
      const { data: res } = await getRankAPI(this.mobilePhone, this.score)
      this.rankList = res.data
    },
    Percentage(e) {
      return e.correct + '%'
    },
    tableRowClassName({ row, rowIndex }) {
      if (row.username === localStorage.getItem('username')) {
        return 'warm-row'
      }
    },
    backhome() {
      this.$router.replace('/home')
    }
  }
}
</script>

<style lang="less" scoped>
html {
  font-family: 'Orbitron', sans-serif;
}
::v-deep .el-table .warm-row {
background: #1BC1EC !important;
}
.bgcolor {
  background-repeat: no-repeat;
  background-image: url(../../assets/7049480.jpg);
  background-position: center;
  width: 100%;
  height: 750px;
  background-size: 100%;
  margin: auto;
  position: relative;
}

.iFLYTEK {
  margin: 5px 0 0 5px;
  width: 150px;
  height: 40px;
}
.zckj {
  position: absolute;
  left: 170px;
  top: 2px;
  font-size: 30px;
}
.font {
  text-align: center;
  font-size: 40px;
  font-weight: bold;
  color: white;
  text-shadow: 0px 1px 0px skyblue, 0px 2px 0px skyblue, 0px 3px 0px skyblue,
    0px 4px 0px skyblue, 0px 5px 10px rgba(0, 0, 0, 0.9);
  width: 550px;
  height: 75px;
  line-height: 75px;
  margin: auto;
  position: relative;
  margin-bottom: 35px;
}
.font::before,
.font::after {
  content: '';
  position: absolute;
  width: 30px;
  height: 30px;
  animation: font 1500ms infinite linear;
}

.font::before {
  top: -10px;
  left: -10px;
  border-top: 5px solid #0d45be;
  border-left: 5px solid #ffffff;
}

.font::after {
  right: -10px;
  bottom: -10px;
  border-bottom: 5px solid #0d45be;
  border-right: 5px solid #ffffff;
}

@keyframes font {
  0% {
    width: 30px;
    height: 30px;
  }
  50% {
    width: calc(100% + 9px);
    height: calc(100% + 9px);
  }
  100% {
    width: 30px;
    height: 30px;
  }
}
.rank {
  margin: auto;
  background-color: #fff;
  background-size: 500px 500px;
}
.ranks {
  width: 150px;
  height: 40px;
  margin: auto;
  line-height: 40px;
  font-size: 20px;
  font-weight: bold;
  color: #1bc1ec;
}
table,
tr,
td {
  border-collapse: collapse;
}
th {
  font-size: 25px;
  height: 50px;
  background: #1e90ff;
}
td {
  font-size: 20px;
  font-weight: bolder;
  color: black;
}
.SCCA {
  position: absolute;
  width: 300px;
  bottom: 0;
  right: 0;
}
@media screen and(max-width: 1650px) {
  .rank {
    width: 78vw;
    height: 75vh;
  }
}
@media screen and(max-width: 1530px) {
  .rank {
    width: 78vw;
    height: 72vh;
  }
}
@media screen and(max-width: 1413px) {
  .bgcolor {
    width: 1413px;
    height: 800px;
    background-size: 100%;
  }
  .rank {
    width: 78vw;
    height: 75vh;
  }
}
@media screen and(max-width: 1390px) {
  .rank {
    width: 78vw;
    height: 75vh;
  }
  .zckj,
  .SCCA {
    display: none;
  }
}
@media screen and(max-width: 1290px) {
  .bgcolor {
    width: 1290px;
    height: 800px;
    background-size: 100%;
  }
  .rank {
    width: 78vw;
    height: 72vh;
  }
}
@media screen and(max-width: 1024px) {
  .bgcolor {
    width: 1024px;
    height: 500px;
    background-size: 100%;
  }
  .iFLYTEK {
    width: 100px;
    height: 50px;
  }

  .rank {
    width: 80vw;
    height: 42vh;
  }
} ;
.button-box{
position: absolute;
top: 15px;
left: 91vw;
}
.button{
  position:absolute;
  text-align: center;
  font-size: 15px;
  background-color: #1bc1ec;
  color: white;
  text-shadow: 0px 1px 0px skyblue, 0px 2px 0px skyblue, 0px 3px 0px skyblue,
    0px 4px 0px skyblue, 0px 5px 10px rgba(0, 0, 0, 0.9);
  width: 100px;
  height: 50px;
  line-height: 50px;
  border: 1px solid #fff;
  cursor: pointer;
}
</style>
